<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>原生的Ajax操作</h1>
    <button>加载Ajax数据</button>
    <script>
        /*
        使用XHR封装发送ajax请求的通用函数
        返回值: promise
        参数为配置对象
            url: 请求地址
            params: 包含所有query请求参数的对象 {name: tom, age: 12} ==> name=tom&age=12
            data: 包含所有请求体参数数据的对象
            method: 为请求方式
        */
        function axios({ url, method = 'GET', params = {}, data = {} }) {

            method = method || 'GET'
            method = method.toUpperCase()
            // 将params中的参数属性拼接到url上   
            // {name: tom: pwd: 123}  ===> queryStr=name=tom&pwd=123
            // url + ? + queryStr
            let queryStr = ''
            // Object.keys(params).forEach(key => {
            //     // &pwd=123
            //     queryStr += '&' + key + '=' + params[key]
            // })
            // // '&name=tom&pwd=123' 或者 ''
            // if (queryStr) {
            //     queryStr = queryStr.substring(1) // 'name=tom&pwd=123'
            //     url += '?' + queryStr  // /user?name=tom&pwd=123
            // }
            queryStr = Object.keys(params).map(k => k+"="+params[k]).join("&");

            return new Promise((resolve, reject) => {
                // 创建XHR对象
                const request = new XMLHttpRequest()
                // 打开连接(初始化请求对象)
                request.open(method, url, true)
                // 设置响应数据类型 ==> 自动解析json文本为js对象/数组, 保存给response属性上
                request.responseType = 'json'
                // 绑定监视request的状态改变的监听
                request.onreadystatechange = function () {
                    // 如果请求还没有完成, 直接结束
                    if (request.readyState !== 4) {
                        return
                    }
                    const { status, statusText } = request
                    // 如果成功了, 取出数据封装成成功的响应数据对象response, 调用resolve(response)
                    if (status >= 200 && status < 300) { // 在[200, 300)
                        const response = {
                            // data: JSON.parse(request.response),
                            data: request.response,
                            status,
                            statusText
                        }
                        resolve(response)
                    } else {
                        // 如果失败了, 封装失败相关信息成error对象, 调用reject(error)
                        reject(new Error('request error status is ' + status))
                    }
                }
                if (method === 'GET' || method === 'DELETE') {
                    // 发送请求
                    request.send()
                } else { // POST/PUT
                    // 设置请求头
                    request.setRequestHeader('Content-Type', 'application/json;charset=utf-8')
                    // 发送请求
                    request.send(JSON.stringify(data))
                }
            })
        }

    </script>

    <script>
        // 使用上面自定义的Ajax封装axios
        // 获取上面的按钮
        const btn = document.querySelector("button");
        // 绑定事件
        btn.onclick = function(){
            axios({method:"GET", url:"http://localhost:3000/stu"})
            .then(response => {
                console.log('Ajax请求成功！');
                console.log(response);
            }).catch(err => {
                console.log("Ajax请求失败");
                console.log(err);
            })
        }
    </script>
</body>

</html>